<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>GoodsList</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/zxy/headAndFoot.css" />
		<link rel="stylesheet" type="text/css" href="css/zxy/goodsList.css" />
		<script src="lib/jquery-3.3.1.min.js"></script>
		<script src="lib/bootstrap.min.js"></script>
		<script src="lib/vue.js"></script>
		<script src="js/zxy/headAndFoot/headAndFoot.js"></script>
		<script src="js/zxy/goodsList/goodsListForSearch.js"></script>
	</head>

	<body>
		<div id="all">
			<div id="topAdv"><a href="#"><img src="img/zxy/headAndFoot/topAdv.jpg"></a><div onClick="closeAdv()" id="closeAdv">X</div></div>
			<div id="head">
				<div id="headBox">
					<div id="headTop">
						<ul id="topLeft">
							<li class="topLeftLi"><a href="#">首页</a></li>
							<li class="topLeftLi"><a href="#">华为官网</a></li>
							<li class="topLeftLi"><a href="#">荣耀官网</a></li>
							<li class="topLeftLi"><a href="#">花粉俱乐部</a></li>
							<li class="topLeftLi"><a href="#">帮助中心</a></li>
							<li class="topLeftLi"><a href="#">V 码 (优购码)</a></li>
							<li class="topLeftLi"><a href="#">首企业购页</a></li>
							<li class="topLeftLi"><a href="#">Select Region</a></li>
							<li class="topLeftLi" id="qrcode"><a href="#">下载 APP<span class="caret"></span></a>
								<div >
									<img src="img/zxy/headAndFoot/qrcode.png"/>
									<p>扫一扫，下载客户端</p>
								</div>
							</li>
							<li class="topLeftLi" id="more"><a href="#">更多精彩<span class="caret"></span></a>
								<ul >
									<div><a href="#">EMUI</a></div>
									<div><a href="#">应用市场</a></div>
									<div><a href="#">华为终端云空间</a></div>
									<div><a href="#">开发者联盟</a></div>
								</ul>
						   </li>
						</ul>
						<ul id="topRight">
							<li class="topRightLi">
								<div id="loged" v-if="ifLogin">
									<a href="#">userName</a>
									<div id="userDrop">
										<div id="userInfo">
											<div id="userLeft">
												<a href="#"><img src="img/zxy/headAndFoot/img_logged_in.png" width="90px" height="90px"/></a>
											</div>
											<div id="userRight">
												<p><a>userName</a></p>
												<a href="#" class="realName"><span></span>未实名</a>
												<a href="#" class="i-mail"><span></span>站内信</a>
											</div>
										</div>
										<div id="userOrder">
											我的订单
											<a href="#">更多 ></a>
										</div>
										<div id="orderList">
											<ul>
												<li><a href="#">待支付</a></li>
												<li><a href="#">待收货</a></li>
												<li><a href="#">待评价</a></li>
												<li><a href="#">退换货</a></li>
												<li><a href="#">旧机回收</a></li>
											</ul>
										</div>
										<div id="otherInfo">
											<div class="discount">
												<a href="#"><span class="img01"></span></a>
												<p class="points">积分</p>
												<span>0分</span>
											</div>
											<div class="discount">
												<a href="#"><span class="img02"></span></a>
												<p class="points">优惠券</p>
												<span>0张</span>
											</div>
											<div class="discount">
												<a href="#"><span class="img03"></span></a>
												<p class="points">代金券</p>
												<span>0.00元</span>
											</div>
										</div>
										<div id="logout"><a href="#">退出登录</a></div>
									</div>
								</div>
								<div id="unlogin" v-else>
									<a href="#">请登录</a>
									<a href="#">注册</a>
								</div>
							</li>
							<li class="topRightLi" id="myOrder">
								<a href="#">我的订单</a>
							</li>
							<li class="topRightLi" id="cartShop">
								<a href="#">
									<span class="cartImg"></span>
									购物车(<font id="cartShopNum">0</font>)
								</a>
								<div class="miniCart" id="emptyCart" v-if="ifEmpty">
									<img src="img/zxy/headAndFoot/空购物车.png" width="100px" height="100px"/>
									<p>您的购物车是空的，赶紧选购吧~</p>
								</div>
								<div class="miniCart" id="cartShopBox" v-else>
									<ul class="cartShopBoxUl">
										<li>
											<div class="selectDiv">
												<label class="checkLabel">
													<input type="checkbox" class="checkBtn"/>
													<span></span>
												</label>
											</div>
											<div class="itemImg">
												<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
											</div>
											<div class="itemInfo">
												<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
												<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
											</div>
										</li>
										<li>
											<div class="selectDiv">
												<label class="checkLabel">
													<input type="checkbox" class="checkBtn"/>
													<span></span>
												</label>
											</div>
											<div class="itemImg">
												<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
											</div>
											<div class="itemInfo">
												<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
												<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
											</div>
										</li>
										<li>
											<div class="selectDiv">
												<label class="checkLabel">
													<input type="checkbox" class="checkBtn"/>
													<span></span>
												</label>
											</div>
											<div class="itemImg">
												<a href="#"><img src="img/zxy/headAndFoot/productImg1.jpg" width="64px" height="64px"/></a>
											</div>
											<div class="itemInfo">
												<p>荣耀畅玩7 全网通版 2GB+16GB（金色）</p>
												<div><font class="itemNum">X1</font><font class="itemPrice">¥ 599.00</font></div>
											</div>
										</li>
										
									</ul>
									<div id="minicartBalance">
										<p>
											<span>总计:</span>
											<font>¥ 15043.00</font>
										</p>
										<a href="#">立即结算</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div id="header">
						<div class="left">
							<a href="#"><img src="img/zxy/headAndFoot/logo.png" /></a>
							<ul>
								<li><a href="#">华为专区</a></li>
								<li><a href="#">荣耀专区</a></li>
								<li><a href="#">HUAWEI P20</a></li>
								<li><a href="#">荣耀 10</a></li>
								<li><a href="#">nova 3i</a></li>
								<li><a href="#">荣耀 V10</a></li>
							</ul>
						</div>
						<div class="right">
							<div class="input-group">
							  <input type="text" class="form-control" placeholder="荣耀 Note10" aria-describedby="sizing-addon3">
							  <span class="input-group-btn">
					          	<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
					          </span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div id="page">
				<div id="pageContent">
					<p id="searchTitle">搜索 [{{searchWord}}] 共找到商品{{listNum}}件</p>
					<div id="sortOption">
						<font>排序:</font>
						<a onClick="changeSort(this,2,1)" href="#">上架时间
							<span :class="{sortStyle1:sortWay==1,sortStyle2:sortWay==2}"></span></a>
						<a onClick="changeSort(this,4,3)" href="#">热度
							<span :class="{sortStyle1:sortWay==3,sortStyle2:sortWay==4}"></span></a>
						<a onClick="changeSort(this,5,6)"  href="#">价格
							<span :class="{sortStyle1:sortWay==5,sortStyle2:sortWay==6}"></span></a>
					</div>
					<div id="searchResult">
						
						<div id="itemList">
							<item v-for="item in items" v-bind:key="item.id" v-bind:item="item"></item>
						</div>
						<div id="pageSelect">
							<div id="selectContent">
								<a  v-bind:class="{disablebtn:currentPage<=1}"
									onClick="changePage(this)" 
									:data-pagenum="1"
								 href="#"><div class="option">|<</div></a>
								<a v-bind:class="{disablebtn:currentPage<=1}"
									onClick="changePage(this)" 
									:data-pagenum="currentPage-1"
								 href="#"><div class="option"><</div></a>
								<a v-bind:class="{disablebtn:pageNum==currentPage}"
									onClick="changePage(this)" 
									:data-pagenum="pageNum"
								 	v-for="pageNum in pages" href="#">
									<div class="option">{{pageNum}}</div>
								</a>
								<a v-bind:class="{disablebtn:currentPage>pages-1}"
									onClick="changePage(this)" 
									:data-pagenum="currentPage-(-1)" href="#"><div class="option">></div></a>
								<a v-bind:class="{disablebtn:currentPage>pages-1}"
									onClick="changePage(this)" 
									:data-pagenum="pages"  href="#"><div class="option">>|</div></a>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div id="foot">
				<div id="footBox">
					<div id="footTop">
						<div>
							<a href="#">
								<span class="slogan1"></span>
								<span>百强企业 品质保证</span>
							</a>
						</div>
						<div>
							<a href="#">
								<span class="slogan2"></span>
								<span>7 天退货 15 天换货</span>
							</a>
						</div>
						<div>
							<a href="#">
								<span class="slogan3"></span>
								<span>48 元起免运费</span>
							</a>
						</div>
						<div>
							<a href="#">
								<span class="slogan4"></span>
								<span>448 家维修网点 全国联保</span>
							</a>
						</div>
					</div>
					<div id="footMid">
						<div class="footList">
							<ul>
								<p>购物相关</p>
								<li>
									<a href="#">购物指南</a>
								</li>
								<li>
									<a href="#">配送方式</a>
								</li>
								<li>
									<a href="#">支付方式</a>
								</li>
								<li>
									<a href="#">常见问题</a>
								</li>
							</ul>
							<ul>
								<p>保修与退换货</p>
								<li>
									<a href="#">保修政策</a>
								</li>
								<li>
									<a href="#">退换货政策</a>
								</li>
								<li>
									<a href="#">退换货流程</a>
								</li>
								<li>
									<a href="#">保修状态查询</a>
								</li>
								<li>
									<a href="#">配件防伪查询</a>
								</li>
							</ul>
							<ul>
								<p>维修与技术支持</p>
								<li>
									<a href="#">售后网点</a>
								</li>
								<li>
									<a href="#">预约维修</a>
								</li>
								<li>
									<a href="#">手机寄修</a>
								</li>
								<li>
									<a href="#">备件价格查询</a>
								</li>
								<li>
									<a href="#">上门服务</a>
								</li>
							</ul>
							<ul>
								<p>关于我们</p>
								<li>
									<a href="#">公司介绍</a>
								</li>
								<li>
									<a href="#">华为商城简介</a>
								</li>
								<li>
									<a href="#">华为线下门店</a>
								</li>
								<li>
									<a href="#">荣耀线下门店</a>
								</li>
								<li>
									<a href="#">诚征英才</a>
								</li>
							</ul>
							<ul>
								<p>关注我们</p>
								<li>
									<a href="#">新浪微博</a>
								</li>
								<li>
									<a href="#">腾讯微博</a>
								</li>
								<li>
									<a href="#">花粉俱乐部</a>
								</li>
							</ul>
							<ul>
								<p>友情链接</p>
								<li>
									<a href="#">华为官网</a>
								</li>
								<li>
									<a href="#">华为商城手机版</a>
								</li>
								<li>
									<a href="#">荣耀官网</a>
								</li>
								<li>
									<a href="#">花粉俱乐部</a>
								</li>
								<li>
									<a href="#">网站地图</a>
								</li>
							</ul>

						</div>
						<div class="serviceTel">
							<p>400-088-6888</p>
							<span>24 小时客服热线（仅收市话费）</span>
							<a>
								<div>
									<font>在线客服</font>
								</div>
							</a>
						</div>
					</div>
					<div id="footBottom">
						<div id="copyright">
							<div id="copyrightLeft"><a href="#"><div></div></a></div>
							<div id="copyrightMid">
								<p><a>隐私声明</a> <a>服务协议</a> Copyright © 2012-2018 华为软件技术有限公司 版权所有 保留一切权利</p>
								<p>公安备案 苏公网安备 32011402010009 号 | 苏 ICP 备 17040376 号 - 6 | 增值电信业务经营许可证：苏 B2-20130048 号 |</p>
							</div>
							<div id="copyrightLogo">
								<a href="#"><img src="img/zxy/headAndFoot/copyright1.jpg"  width="70px" height="24px"/></a>
								<a href="#"><img src="img/zxy/headAndFoot/copyright2.png"  width="70px" height="24px"/></a>
								<a href="#"><img src="img/zxy/headAndFoot/copyright3.png"  width="70px" height="24px" /></a>
								<a href="#"><img src="img/zxy/headAndFoot/copyright4.png"  width="70px" height="24px" /></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--获取隐式对象  -->
		<span 
			data-iflogin="${ifLogin }" 
			data-ifempty="${ifEmpty }" 
			data-userid="${user.userid }" 
			data-usertel="${user.tel }" 
			id="getData" style="display:none">
		</span>
		
		<script>
			//将商品列表的数组型字符串转为json数组型对象
			var jsonstr='${requestScope.items}';
			console.log("jsonstr:"+jsonstr);
			var itemList=$.parseJSON(jsonstr);
			console.log(itemList);
			//var jsonobj=eval("("+jsonstr+")");
			
			//当前排序方式
			var sortWay='${requestScope.sortWay}';
			console.log("sortWay:"+sortWay);
			
			//总记录数
			var listNum='${requestScope.listNum}';
			console.log("listNum:"+listNum);
			var pagesize=2;
			var pages=Math.ceil(listNum/2);//总页数
			console.log("pages:"+pages);
			//当前页
			var currentPage='${requestScope.currentPage}';
			console.log("currentPage:"+currentPage);
			//当前搜索词
			var searchWord='${requestScope.searchWord}';
			console.log("searchWord:"+searchWord);
			
			
			/* function showList(obj){
				var fcid=jQuery(obj).data("fcid");
				var scid=jQuery(obj).data("scid");
				scid=(scid==undefined)?"-1":scid;
				var sortWay=$(obj).data("sortway");
				sortWay=(sortWay==undefined)?"2":sortWay;
				location.href="GoodsList?method=goodsListForClassify&fcid="
						+fcid+"&scid="+scid+"&sortWay="+sortWay+"&viewPage=1";
			} */
			
			
			//改变排序方式
			//传入选项和其默认排序以及相反的排序,如果目前排序方式不是该选项的排序方式
			//或者时该选项的相反排序则修改排序方式为该选项的默认排序，如果已经是默认排序就
			//修改排序方式为该选项的相反排序
			function changeSort(obj,def,opposite){
				if(sortWay==def){
					sortWay=opposite;
				}
				else{
					sortWay=def;
				}
				
				location.href="GoodsList?method=goodsListForSearch&"
						+"&sortWay="+sortWay+"&viewPage=1&searchWord="+searchWord;
			}
			
			/* <div id="sortOption">
				<font>排序:</font>
				<a onClick="changeSort(this,2,1)" href="#">上架时间
					<span :class="{sortStyle1:sortWay==1,sortStyle2:sortWay==2}"></span></a>
				<a onClick="changeSort(this,4,3)" href="#">热度
					<span :class="{sortStyle1:sortWay==3,sortStyle2:sortWay==4}"></span></a>
				<a onClick="changeSort(this,5,6)"  href="#">价格
					<span :class="{sortStyle1:sortWay==5,sortStyle2:sortWay==6}"></span></a>
			</div> */
			var searchTitle=new Vue({
				el:"#searchTitle",
				data:{
					searchWord:searchWord,
					listNum:listNum,
				}
			})
			
			//排序方式
			var sortOption=new Vue({
				el:"#sortOption",
				data:{
					sortWay:sortWay,
					searchWord:searchWord,
				},
				methods:{
				},
			});
			
			//商品列表
			Vue.component('item', {
				props: ['item'],
				template: `
					<div class="itemInfo">
					<div v-show="item.label" v-bind:style="label">{{item.label}}</div>
						<a v-bind:href="'Product?method=productInfo&tcid='+item.tcid+'&scid='+item.scid+'&fcid='+item.fcid"><img v-bind:src='item.titleImg' width="200px" height="200px"/></a>
						<a v-bind:href="'Product?method=productInfo&tcid='+item.tcid+'&scid='+item.scid+'&fcid='+item.fcid"><p>{{item.name}}</p></a>
						<p v-bind:style="discountMsg">{{item.discountMsg}}</p>
						<font>{{item.price | price()}}</font>
						<div>
							<a v-bind:href="'Product?method=productInfo&tcid='+item.tcid+'&scid='+item.scid+'&fcid='+item.fcid"><span>选购</span></a>
							<span>已有{{item.evaluateNum}}人评价</span>
						</div>
					</div>
				`,
				data: function() {
					return {
						label: {
							width: '50px',
							height: '50px',
							borderRadius: '50%',
							background: "red",
							position: 'absolute',
							top: '180px',
							right: '10px',
							lineHeight: '50px',
							textAlign: 'center',
							color: "white",
						},
						discountMsg:{
							maxHeight:"20px",
							overflow:"hidden",
							textOverflow:"ellipsis",
							whiteSpace:"nowrap",
							color:"red",
						}
					};
				},
			});
			Vue.filter('price', function(val) {
				val = val || 0;
				return "¥" + val;
			})
			
			var item = new Vue({
				el: "#itemList",
				data: {
					items: itemList,
				},
			});
			
			var pageSelect=new Vue({
				el:"#pageSelect",
				data:{
					pages:pages,
					sortWay:sortWay,
					currentPage:currentPage,
				}
			});
			//根据页数跳往相应的页数，fcid和scid以及排序方式为默认的
			function changePage(obj){
				var pageNum=$(obj).data("pagenum");
				location.href="GoodsList?method=goodsListForSearch&"
						+"&sortWay="+sortWay+"&viewPage="+pageNum+"&searchWord="+searchWord;
			}
					
			
		</script>
	</body>
</html>